<div class="panel panel-info component" indigo-collapsible-component>
    <div class="panel-heading">
        {{vm.title}}
        <span ng-disabled="vm.isReadonly" class="icon icon-save btn action-panel-btn pull-right m-r30-imp"
              title="Export {{vm.title}}"
              ng-click="!vm.isReadonly && vm.exportStructure(); $event.stopPropagation()">
        </span>
        <span ng-disabled="vm.isReadonly" class="icon icon-folder-open btn action-panel-btn pull-right"
              title="Import {{vm.title}}"
              ng-click="!vm.isReadonly && vm.importStructure(); $event.stopPropagation()">
        </span>
        <span ng-disabled="vm.isReadonly"
              class="icon icon-edit btn action-panel-btn  panel-btn-reaction-scheme pull-right"
              title="Edit/Add {{vm.title}}"
              ng-click="!vm.isReadonly && vm.openEditor(); $event.stopPropagation()">
        </span>
    </div>
    <div indigo-resizable max-height="300" min-height="50" ng-dblclick="!vm.isReadonly && vm.openEditor($event)"
         class="panel-body text-center structure-scheme__img" ng-class="{'sizable-panel-body': image}">
        <div ng-if="vm.structureModel.image" class="h-100">
            <img class="img-responsive center-block h-100"
                 ng-src="data:image/svg+xml;base64,{{vm.structureModel.image}}" alt="Image is unavailable.">
        </div>
        <h3 ng-if="!vm.structureModel.image" class="text-muted" i-translate="EMPTY"></h3>
    </div>
</div>
